<template>
  <div class="page">
    <global-header title="管理中心" @back="handleBack" />
    <main class="page-main" ref="manageRef">
      <section class="mx-[15px] rounded-[10px] overflow-hidden bg-[#fff] mb-[15px]">
        <!-- 流水盈亏信息 -->
        <article class="manage-box">
          <div>
            <div class="pl-[15px] flex justify-between">
              <div class="text-[15px] text-[#fff]">用户余额</div>
              <div class="manage-name">
                {{ userInfo?.Name || "" }}
              </div>
            </div>
            <div class="text-[24px] pt-[4px] pb-[10px] text-[#fff] pl-[15px]">
              {{ formatCurrency(roomTotal?.Balance || 0) || 0 }}
            </div>
          </div>
          <div class="h-[1px] bg-[#407ea8] mx-[15px]"></div>
          <ul class="flex justify-between text-[#fff] text-center pt-[8px]">
            <li class="flex-1 w-0 border-right !border-[#E4E4E4]">
              <div class="break-all">{{ formatCurrency(roomTotal?.BetAmount || 0) }}</div>
              <div class="text-[#7d92b5] mt-[5px]">今日流水</div>
            </li>
            <li class="flex-1 w-0 border-right !border-[#E4E4E4]">
              <div class="break-all">{{ formatCurrency(roomTotal?.NetAmount || 0) }}</div>
              <div class="text-[#7d92b5] mt-[5px]">今日盈亏</div>
            </li>
            <li class="flex-1 w-0 border-right !border-[#E4E4E4]">
              <div class="break-all">{{ formatCurrency(roomTotal?.Water || 0) }}</div>
              <div class="text-[#7d92b5] mt-[5px]">今日回水</div>
            </li>
            <li class="flex-1 w-0">
              <div class="break-all">
                {{ formatCurrency(roomTotal?.TotalNetAmount || 0) }}
              </div>
              <div class="text-[#7d92b5] mt-[5px]">总盈亏</div>
            </li>
          </ul>
        </article>
        <!-- 收款/入群/申请 -->
        <article class="flex my-[14px] text-[#888] text-[14px]">
          <div class="apply-item relative" @click="handleJumpApply('apply')">
            <img src="@/assets/images/manage/updown-apply.png" class="w-[31px] h-[33px]" />
            <div class="mt-[4px]">申请管理</div>
            <span
              v-if="applyCount"
              class="w-[8px] h-[8px] rounded-full bg-[red] absolute top-[5px] right-[28px]"
            ></span>
          </div>
          <div class="apply-item relative" @click="handleJumpApply('join-room')">
            <img src="@/assets/images/manage/join-room.png" class="w-[31px] h-[33px]" />
            <div class="mt-[4px]">入群申请</div>
            <span
              v-if="joinCount"
              class="w-[8px] h-[8px] rounded-full bg-[red] absolute top-[5px] right-[28px]"
            ></span>
          </div>
          <div class="apply-item" @click="handleJumpPayment">
            <img src="@/assets/images/manage/payment.png" class="w-[31px] h-[33px]" />
            <div class="mt-[4px]">收款方式</div>
          </div>
        </article>
      </section>
      <div class="mx-[15px] rounded-[12px] overflow-hidden bg-[#fff]">
        <div v-for="item in manageStore.list" @click="handleJump(item)">
          <template v-if="item.children?.length">
            <van-collapse v-model="item.actives" v-if="item.show">
              <van-collapse-item :title="item.label" :name="item.key">
                <template #icon>
                  <div class="mr-[10px] flex items-center">
                    <svg-icon :name="item.icon" color="#787878"></svg-icon>
                  </div>
                </template>
                <van-cell-group class="collapse-cell">
                  <template v-for="menu in item.children">
                    <van-cell
                      :title="menu.name"
                      is-link
                      :to="menu.path"
                      v-if="
                        menu.path != '/admin/user/sub' ||
                        (menu.path == '/admin/user/sub' && premsStore.isRoomAdmin)
                      "
                    />
                  </template>
                </van-cell-group>
              </van-collapse-item>
            </van-collapse>
          </template>
          <template v-else>
            <van-cell :title="item.label" is-link :to="item.path" v-if="item.show">
              <template #icon>
                <div class="mr-[10px] flex items-center">
                  <svg-icon :name="item.icon" color="#787878"></svg-icon>
                </div>
              </template>
            </van-cell>
          </template>
        </div>
      </div>
      <div class="mx-[15px] rounded-[12px] overflow-hidden bg-[#fff] my-[15px]">
        <van-cell title="退出" is-link @click="logout">
          <template #icon>
            <div class="mr-[10px] flex items-center">
              <svg-icon name="manage-logout"></svg-icon>
            </div>
          </template>
        </van-cell>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-main-manage",
    meta: {
      pageIndex: 2,
    }
  }
</route>
<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { formatCurrency } from "@/utils/common";
import { storeToRefs } from "pinia";
import { useManagePageStore } from "./hooks/useManage";
import { usePremsStore } from "@/store/modules/prems";
import { toast } from "@/utils/toast";
import { useRoomStore } from "@/store/modules/room";

const manageRef = ref();
const premsStore = usePremsStore();
const { isMenuSetting, isMenuApply } = storeToRefs(premsStore);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const router = useRouter();
const manageStore = useManagePageStore();
const roomStore = useRoomStore();
const { roomTotal, applyCount, joinCount } = storeToRefs(roomStore);

const handleJump = (item: ManageMenuItem) => {
  if (item.path) {
    router.push(item.path);
  }
};

const handleBack = () => {
  router.back();
  setTimeout(() => {
    manageStore.resetList();
  }, 300);
};

const logout = () => {
  showConfirmDialog({
    title: "",
    message: "是否退出当前账号？",
    className: "confirm-dialog"
  }).then(() => {
    // on confirm
    userStore.logout();
  });
};

const handleJumpApply = (type: string) => {
  if (isMenuApply.value) {
    if (type == "apply") {
      roomStore.applyCount = 0;
      router.push("/admin/apply/updown");
    } else {
      roomStore.joinCount = 0;
      router.push("/admin/apply/join-room");
    }
  } else {
    toast.info("暂无权限");
  }
};

const handleJumpPayment = () => {
  if (isMenuSetting.value) {
    router.push("/admin/setting/payment");
  } else {
    toast.info("暂无权限");
  }
};

onMounted(() => {
  roomStore.actionRoomTotal();
  if (manageRef.value) {
    manageRef.value.scrollTop = manageStore.scrollTop;
  }
});

onBeforeUnmount(() => {
  if (manageRef.value) {
    manageStore.scrollTop = manageRef.value.scrollTop;
  }
});
</script>
<style scoped lang="scss">
.page-main {
  background: url("@/assets/images/manage/bg.png") no-repeat;
  background-size: 100% auto;
  background-position: center -90px;
}
.manage-box {
  height: 152px;
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 20px;
  background: linear-gradient(to bottom, #40c3e1 0%, #234782 100%);
}
:deep() {
  .van-collapse-item__content {
    padding: 0;
    background-color: #fff;
    padding-left: 20px;
    .collapse-cell {
      background-color: #f8f8f8 !important;
      .van-cell {
        --van-cell-background: #f8f8f8;
      }
    }
  }
}
</style>
<style scoped>
.manage-name {
  @apply px-[12px] h-[21px] text-[15px] flex items-center rounded-l-[10px] bg-[#3080AE] text-[#c0deeb];
}
.apply-item {
  @apply flex-1 w-0 flex flex-col justify-center items-center;
}
</style>
